<template>
	<section   class="grid-content bg-purple-light">
	<h1 style="color: #333;font-size: 20px;padding: 10px 0;text-align: center;margin-top: 10px">编辑文章</h1>
	<el-row>
		<el-col :span="24">
		  <div class="grid-content bg-purple">
		  <div class="allCOlor" style="text-indent: 1.3em"> 
			  		文章ID：<el-input disabled style="text-indent: 0em" v-model="inputID" clearable></el-input>
			  </div>
			  <div class="allCOlor"> 
			  		文章标题：<el-input placeholder="请输入标题，必要" v-model="inputtitle" clearable></el-input>
			  </div>
			  <div class="allCOlor" style="text-indent: 2em"> 
			  		作者：<el-input style="text-indent: 0em" placeholder="请输入作者，必要" v-model="inputauthor" clearable></el-input>
			  </div>
		  </div>
		</el-col>
	</el-row>
<div style="color: #333;margin: 10px;font-size: 18px">上传封面图<span style="color:red">（必要）</span></div>
	<el-row>
		<el-col :span="24">
			<div class="grid-content imgloading bg-purple" style="padding: 10px 0">
			  	<el-upload
				  class="avatar-uploader"
				  :action="path"
				  :show-file-list="false"
				  :before-upload="beforeAvatarUpload"
				  :on-success="handleAvatarSuccess"
				  >
				  <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
				  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
				  <i class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<span style="color: #000;padding-left: 50px;padding-top: 20px;display: inline-block;width: 80%"><span style="color: red">注意：(必要)</span>上传图片时，当选择好图片，会自动上传，无需手动点击，图片上传完成后，会显示在页面上，如果图片过大，请稍等会儿，上传图片完成后显示的是缩略图，点击不可预览，如果选错，可以再次上传覆盖掉原来的图片</span>
				<div v-if='imgUplad' class="img_loading">
					<span>图片上传中，请稍后</span>
					<div class="spinner">
					  <div class="bounce1"></div>
					  <div class="bounce2"></div>
					  <div class="bounce3"></div>
					</div>
				</div>
				<!-- 上传完成后显示图片 -->
				<div v-else class="img_loading_show">
					 <img v-if='imageUrl'  :src="imageUrl" class="avatar">
				</div>
			</div>
		</el-col>
	</el-row>
<el-row>
		<el-col :span="24">
		  <div class="grid-content bg-purple">
			  <div class="allCOlor"> 
			  		文章类型<span style="color: red;padding-left:10px;">(必要)：</span>
			  		<el-radio v-model="radio" label="1">图文</el-radio>
  					<el-radio v-model="radio" label="2">视频</el-radio>
			  </div>
		  </div>
		</el-col>
	</el-row>
	<div style="font-size: 18px;padding: 10px">图文<span style="color: red;">（可选）</span></div>

	<my-ue :texts="ueOne" :ueID="ueIDone" ref="ue"></my-ue>


	<div style="font-size: 18px;padding: 10px">视频<span style="color: red;">（可选）</span></div>
		<el-row>
		<el-col :span="24">
			<div class="grid-content imgloading bg-purple" style="padding: 10px 0">
			  	<el-upload
				  class="avatar-uploader"
				  :action="path"
				  :show-file-list="false"
				  :before-upload="beforeVideoUpload"
				  :on-success="handleVideoSuccess"
				  >
				  <i  class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<span style="color: #000;padding-left: 50px;padding-top: 20px;display: inline-block;width: 80%"><span style="color: red">注意：(可选)</span>上传视频时，当选择好视频，会自动上传，无需手动点击，视频上传完成后，会显示在视频上，点击可以播放，如果视频过大，请稍等会儿，如果选错，可以再次上传覆盖掉原来的视频</span>
				<div v-if='videolad' class="img_loading">
					<span>视频上传中，请稍后</span>
					<div class="spinner">
					  <div class="bounce1"></div>
					  <div class="bounce2"></div>
					  <div class="bounce3"></div>
					</div>
				</div>
				<!-- 上传完成后显示视频 -->
				<div v-else class="img_loading_show">
					 <video v-if='videoUrl' controls  :src="videoUrl" class="avatar"></video>
				</div>
			</div>
		</el-col>
	</el-row>
	<div style="font-size: 18px;padding: 10px">图文<span style="color: red;">（可选）</span></div>

	<smy-ue :texts="ueTwo"  :ueID="ueIDtwo" ref="sue"></smy-ue>

	<div class="Oprah">
		<el-button size="small" type="primary" @click='previewArticle'>预览文章</el-button>
  		<el-button type="primary" @click='publishArticle'>确认修改并发布文章</el-button>
	</div>
	</section>
</template>
<script>
	import ue from './ue.vue' 
	import { sendDataPost,baseURL } from "../../api/api";
	export default{
		data(){
			return{
				path:baseURL+"system/springUpload",
				ueIDtwo:"ueditorTwo",
				ueIDone:"ueditorOne",
				imgUplad:false,
				videolad:false,
				inputID:"-1",
				inputtitle:"",
				imageUrl: '',
				inputauthor:"",
				radio:"0",
				videoUrl:"",
				ueOne:"",
				ueTwo:""
			}
		},
		components:{
			myUe:ue,
			smyUe:ue
		},
		created(){
			this.inputID=this.$route.params.id
			this.saveID()
		}, 
		methods:{
			// 存ID并防止刷新被干掉
			saveID(){
				let id=parseInt(sessionStorage.getItem("e_at"))
		        if (id) {
		          if (this.$route.params.id&&id!==this.$route.params.id) {
		            sessionStorage.setItem("e_at",this.$route.params.id)
		              this.inputID=this.$route.params.id
		          }else{
		            this.inputID=id
		          }
		        }else{
		        sessionStorage.setItem("e_at",this.$route.params.id)
		          this.inputID=parseInt(sessionStorage.getItem("e_at"))
		      }
			},
			// 请求数据并填充视图
			getData(){
				let id=JSON.parse(this.inputID)
				let params=sendDataPost({url: "article/detail",msg: {id:id}})
				let formatdata=JSON.stringify(params.params)
				console.log(formatdata)
				this.$http.post(params.baseURL,formatdata).then(res=>{
					var res=JSON.parse( res.bodyText)
					console.log(res)
					this.inputtitle=res.msg.title
					this.inputauthor=res.msg.authorName
					this.imageUrl=res.msg.faceImg
					this.radio=JSON.stringify(res.msg.articleType)
					this.ueOne=res.msg.text
					this.videoUrl=res.msg.videoUrl
					this.ueTwo=res.msg.text2
					localStorage.setItem("ueOne",JSON.stringify(res.msg.text))
					localStorage.setItem("ueTwo",JSON.stringify(res.msg.text2))
				})
			},
			// 上传封面图成功
			handleAvatarSuccess(res, file) {
		        this.imageUrl = res.msg.path
		        this.imgUplad=false
		      },
		      // 上传封面图判断
		      beforeAvatarUpload(file){
 				var isJPG = file.type === 'video/mp4'||file.type === 'video/wmv'||file.type === 'video/avi'||file.type === 'video/mkv'||file.type === 'video/3gp'||file.type === 'video/mov'||file.type === 'video/asf';
 				console.log(isJPG)
 				 if (isJPG) {
        		  this.$message.error('请上传图片');
        		  return
        		}
        		this.imgUplad=true
		      },
		      // 上传视屏成功
		      	handleVideoSuccess(res,file){
		      		this.videoUrl = res.msg.path
		      		this.videolad=false
		      	},
		      // 上传视屏判断
		      	beforeVideoUpload(file){
		      		var isMOVE = file.type !== 'video/mp4'||file.type !== 'video/wmv'||file.type !== 'video/avi'||file.type !== 'video/mkv'||file.type !== 'video/3gp'||file.type !== 'video/mov'||file.type !== 'video/asf';
 				console.log(isMOVE)
 				 if (!isMOVE) {
        		  this.$message.error('请上传视频');
        		  return
        		}
		      		this.videolad=true
		      	},
		      	// 预览文章
		      	previewArticle(){
		      		this.getUEOneContent()
		      		this.getUETwoContent()
		      		let params={
		      			title:this.inputtitle,
		      			authorName:this.inputauthor,
		      			faceImg:this.imageUrl,
		      			articleType:this.radio,
		      			text: this.ueOne,
		      			videoUrl:this.videoUrl,
		      			text2:this.ueTwo
		      		}
		      		sessionStorage.setItem("p_art_shuzi","0")
		      		localStorage.setItem("p_art",JSON.stringify(params))
		      		window.open("./static/preview/previewArticle.html")
		      	},
				// 发布文章
				publishArticle(){
					this.getUEOneContent()
		      		this.getUETwoContent()
		      		if (this.inputtitle=="") {
		      			 this.$notify({
				         title: '温馨提示',
				          message: '请您输入标题',
				          type: 'error'
				        });
		      		return
		      		}else if (this.inputauthor=="") {
		      			 this.$notify({
				         title: '温馨提示',
				          message: '请您输入作者',
				          type: 'error'
				        });
		      		return
		      		}else if (this.imageUrl=="") {
		      			 this.$notify({
				         title: '温馨提示',
				          message: '请您上传封面图',
				          type: 'error'
				        });
		      		return
		      		}else if (this.radio==0) {
		      			this.$notify({
				         title: '温馨提示',
				          message: '请您选择文章类型',
				          type: 'error'
				        });
		      		return
		      		}else if (this.ueOne==""&&this.ueTwo=="") {
		      			this.$notify({
				         title: '温馨提示',
				          message: '两个编辑器虽然是可选，但是要保证有一个不为空哦',
				          type: 'error'
				        });
		      		return
		      		}else if (this.radio==2&&this.videoUrl=="") {
		      				this.$notify({
				         title: '温馨提示',
				          message: '您选择了文章类型为视频，但是您没有上传视频呀！快去传视频吧。',
				          type: 'error'
				        });
		      		return
		      		} else{
		      		let params=sendDataPost({url: "article/edit",msg: {
								articleId:sessionStorage.getItem("e_at"),
		      			title:this.inputtitle,
		      			authorName:this.inputauthor,
		      			faceImg:this.imageUrl,
		      			articleType:this.radio,
		      			text: this.ueOne,
		      			videoUrl:this.videoUrl,
		      			text2:this.ueTwo
		      		}})
		      		var formatdata=JSON.stringify(params.params)
		      		console.log(params.params)
		      		this.$http.post(params.baseURL,formatdata).then(res=>{
		      			console.log(res.bodyText)
		      			var res=JSON.parse(res.bodyText)
		      			if (res.desc=="操作成功") {
		      					this.$notify({
						         title: '温馨提示',
						          message: '恭喜您！修改的文章发布成功',
						          type: 'success'
				        		});
							this.reloadRouter()
		      			}
		      		})
					
					}
				},
		      	// 获取第一个编辑器的HTML
		      getUEOneContent() {
		        let content = this.$refs.ue.getUEContentOne();
		        this.ueOne=content
		      },

		      // 获取第二个编辑器的HTML
		       getUETwoContent() {
		        let content = this.$refs.sue.getUEContentTwo();
		        this.ueTwo=content
		      },
		      // 重载路由
		      reloadRouter(){
		      	var _this=this
				 var curruntPath =this.$router.history.current.fullPath;
				 console.log(curruntPath)
				  this.$router.replace({
				    path: '/empty'
				  });
				  setTimeout(function () {
				    _this.$router.replace({
				      path: curruntPath
				    });
				  });
		      }
		    
		},
		mounted(){
			this.getData()
		},
		beforeDestroy() {
			console.log(this.$refs.ue)
			console.log(this.$refs.sue)
		    this.$refs.ue.destroyedExampleOne().destroy();
		    this.$refs.sue.destroyedExampleTwo().destroy();
		}
	}
</script>
<style scope>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
	.allCOlor{
		color: #333;
		font-size:18px;
		padding: 15px 5px;
		
	}
	.el-input{
		display: inline-block;
		width: 90%;
	}
	.avatar-uploader{
		width: 50%!important;
		margin-right: 0!important
	}
	.avatar-uploader .el-upload {
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin:10px 100px 0;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
/*c3上传动画*/
.imgloading{
	position: relative;
}
.img_loading{
	margin: -200px auto 0;
	position: absolute;
  	right: 880px;
   text-align: center;
}
.img_loading_show{
	margin: -245px auto 0;
	position: absolute;
  	right: 880px;
}
.spinner {
	margin-top: 30px;
  width: 150px;
  text-align: center;
}
 
.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.Oprah{
	margin-top: 30px;
	padding-bottom: 30px;
	text-align: center;
	display: flex;
	justify-content: space-around;
}
</style>